<template>
  <div>
    <el-button @click="clearFilter">清除条件<i class="el-icon-refresh-left el-icon--right"></i></el-button>
    <el-button @click="oddsSetting">赔率<i class="el-icon-setting el-icon--right"></i></el-button>
    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        prop="bankerName"
        label="网站"
        width="180"
        column-key="id"
        :filters="bankerFilters"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="100"
        :filters="playFilters"
        :filter-method="filterType"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.play_type" :value="scope.row.type"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="oddsName"
        align="center"
        label="赔付规则名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="odds"
        label="赔率"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="waterRate"
        label="退水比例"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { custOddsList } from '@/api/financial/odds'
import { getDicts } from '@/api/system/dict/data'

export default {
  dicts: ['play_type'],
  name: 'BankerTable',
  props: {
    custId: {
      type: Number,
      default: null
    },
    custName: {
      type: String,
      default: ''
    },
    custType: {
      type: String,
      default: 1
    },
    options: {
      type: Array,
      default: null
    },
    value: [Number, String, Array],
    // 当未找到匹配的数据时，显示value
    showValue: {
      type: Boolean,
      default: true
    },
    separator: {
      type: String,
      default: ','
    }
  },
  data() {
    return {
      bankerFilters: [],
      playFilters: [],
      tableData: []
    }
  },
  created() {
    this.initValue()
    this.getList()
  },
  computed: {},
  methods: {
    initValue() {
      getDicts('play_type').then(res => {
        res.data.map(r => {
          this.playFilters.push({ 'text': r.dictLabel, 'value': r.dictValue })
        })
      })
    },
    getList() {
      custOddsList(this.custId).then(res => {
        this.tableData = res.data
        var bankers = []
        res.data.map(r => {
          bankers.push({ 'text': r.bankerName, 'value': r.id })
        })
        this.bankerFilters = [...new Map(bankers.map(item => [item.value, item])).values()]
      })
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    oddsSetting() {
      var item = { 'custId': this.custId, 'custName': this.custName }
      this.$emit('editOdds', item)
    },
    formatter(row, column) {
      console.log(row, column)
      return '100 | ' + row[column['property']] * 100
    },
    filterType(value, row) {
      return row.type === value
    },
    filterHandler(value, row, column) {
      const property = column['columnKey']
      return row[property] === value
    }
  },
  filters: {
    handleArray(array) {
      if (array.length === 0) return ''
      return array.reduce((pre, cur) => {
        return pre + ' ' + cur
      })
    }
  }
}
</script>
